import { typeOf } from '../../assets/scripts/common'

// 可视化相关
const state = {
  activeCom: null, // 当前正在设置的组件，右侧面板的数据
  components: [], // 中间面板中的数据
  layout: [], // 组件布局信息
  menuShow: false, // 右击显示
  grid: {
    vertical: 10,
    horizontal: 10
  }, // 系统布局的整体位置
  sourceTree: [
    {
      id: 'machineResult',
      label: 'machineResult',
      children: [
        {
          id: 'machineResult.reference',
          label: 'reference'
        },
        {
          id: 'machineResult.resultText',
          label: 'resultText'
        },
        {
          id: 'machineResult.sourceText',
          label: 'sourceText'
        }
      ]
    }
  ], // 组件数据源显示
  source: {
    machineResult: {
      reference: '',
      resultText: '',
      sourceText: ''
    }
  }, // 数据源
  dragShow: false,
  dragInfo: { x: 0, y: 0, text: '纯文本' }
}

const actions = {
  changeLayoutActiveCom ({ commit }, data) {
    commit('setActiveCom', data)
    commit('updateLayout', data)
  },
  changeActiveCom ({ commit }, data) {
    commit('setActiveCom', data)
    commit('updateComponents', data)
  },
  removeActiveCom ({ commit }, data) {
    commit('setActiveCom', null)
    commit('removeComponents', data)
  },
  setSource ({ commit }, data) {
    commit('setSource', data)
    commit('setSourceTree', null)
  }
}

const mutations = {
  // 设置拖拽显示
  setDragShow (state, data) {
    state.dragShow = data
  },
  // 设置拖拽信息
  setDragInfo (state, data) {
    state.dragInfo = data
  },

  // 设置数据源
  setSource (state, data) {
    state.source = data
  },

  // 设置数据源显示树
  setSourceTree (state) {
    let treeData = []
    const loop = (data, parentObj, parentText) => {
      for (let i in data) {
        let item = data[i]
        let id = parentText ? `${parentText}.${i}` : i

        let obj = {
          id,
          label: i
        }

        if (typeOf(item) === 'object' && Object.keys(item).length > 0) {
          obj.children = []
          loop(item, obj.children, id)
        }

        if (parentObj) {
          parentObj.push(obj)
        } else {
          treeData.push(obj)
        }
      }
    }

    loop(state.source)
    state.sourceTree = treeData
  },

  // 设置右击显示面板
  setMenuShow (state, data) {
    state.menuShow = data
  },

  // 设置整体的布局
  setGrid (state, data) {
    state.grid = data
  },

  // 设置当前激活组件
  setActiveCom (state, data) {
    state.activeCom = data
  },

  // 新增组件
  addComponents (state, data) {
    state.components.push(data)
    console.log('components', state.components)
  },

  // 新增组件
  addLayout (state, data) {
    state.layout.push(data)
  },

  // 重设
  setComponents (state, data) {
    state.components = data
  },

  // 更新组件
  updateComponents (state, data) {
    // 通过id找到对应的数据替换之
    let replaceIndex
    state.components.find((item, index) => {
      if (item.id === data.id) {
        replaceIndex = index
        return true
      }
    })

    state.components.splice(replaceIndex, 1, data)
    console.log('components', state.components)
  },

  updateLayout (state, data) {
    // 通过id找到对应的数据替换之
    let replaceIndex
    state.components.find((item, index) => {
      if (item.id === data.id) {
        replaceIndex = index
        return true
      }
    })

    state.layout.splice(replaceIndex, 1, data.location)
    console.log('layout', state.layout)
  },

  // 删除组件
  removeComponents (state, data) {
    let delIndex
    state.components.find((item, index) => {
      if (item.id === data.id) {
        delIndex = index
        return true
      }
    })

    state.components.splice(delIndex, 1)

    state.layout.splice(delIndex, 1)

    // 重新计算state.layout的i属性
    state.layout.forEach((item, index) => {
      item.i = index
    })
  },

  // 重置组件
  resetComponents (state, data) {
    state.activeCom = null
    state.components = data || []
  },

  // 重置位置
  resetLayout (state, data) {
    state.activeCom = null
    state.layout = data || []
  }
}

export default {
  state,
  actions,
  mutations
}
